<template>
	<view class="container-bill-detail-page" :style="{height: `${windowHeight}px`}">
		<view class="menu-list">
			<uni-section title="基础信息" type="line"></uni-section>
			<view class="list-cell list-cell-arrow">
				<view class="menu-item-box">
					<view class="label">收支类型</view>
					<view class="value input">
						<uni-data-picker class="com-data-picker" placeholder="请选择" popup-title="请选择收支类型"
							:localdata="typeList" :clear-icon="false" v-model="formData.type" @change="onchange"
							@nodeclick="onnodeclick" @popupopened="onpopupopened">
						</uni-data-picker>
					</view>
				</view>
			</view>
			<view class="list-cell list-cell-arrow">
				<view class="menu-item-box">
					<view class="label">交易对象</view>
					<view class="value input">
						<uni-data-picker class="com-data-picker" placeholder="请选择" popup-title="请选择交易对象"
							:localdata="customerList" :clear-icon="false" v-model="formData.transObjName" @change="onchange"
							@nodeclick="onnodeclick" @popupopened="onpopupopened">
						</uni-data-picker>
					</view>
				</view>
			</view>
			<view class="list-cell list-cell-arrow">
				<view class="menu-item-box">
					<view class="label">单据日期</view>
					<view class="value input">
						<uni-datetime-picker placeholder="请选择" type="date" :clear-icon="false" v-model="formData.billTime"
							@maskClick="maskClick" />
					</view>
				</view>
			</view>
			<view class="list-cell">
				<view class="menu-item-box">
					<view class="label">单据编号</view>
					<view class="value input pd-r-0">
						<uni-easyinput v-model="formData.billNo" placeholder="请输入"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="list-cell list-cell-arrow2">
				<view class="menu-item-box">
					<view class="label">财务人员</view>
					<view class="value input">
						<!-- <uni-data-picker class="com-data-picker" placeholder="请选择" popup-title="请选择财务人员"
							:localdata="userList" :clear-icon="false" v-model="formData.financeUserId" @change="onchange"
							@nodeclick="onnodeclick" @popupopened="onpopupopened">
						</uni-data-picker> -->
						<uni-easyinput v-model="formData.financeUserId" placeholder="请输入"></uni-easyinput>
					</view>
				</view>
			</view>
		</view>
		<view class="menu-list">
			<uni-section title="收支项目" type="line"></uni-section>
			<view class="list-cell list-cell-arrow">
				<view class="menu-item-box">
					<view class="label">收支项目</view>
					<view class="value input">
						<uni-data-picker class="com-data-picker" placeholder="请选择" popup-title="请选择收支项目"
							:localdata="inOutItemList" :clear-icon="false" v-model="formData.inOutItemName" @change="onchange"
							@nodeclick="onnodeclick" @popupopened="onpopupopened">
						</uni-data-picker>
					</view>
				</view>
			</view>
		</view>
		<view class="menu-list">
			<uni-section title="结算信息" type="line"></uni-section>
			<view class="list-cell list-cell-arrow">
				<view class="menu-item-box">
					<view class="label">结算账户</view>
					<view class="value input">
						<uni-data-picker class="com-data-picker" placeholder="请选择" popup-title="请选择结算账户"
							:localdata="accountList" :clear-icon="false" v-model="formData.accountId" @change="onAccountChange"
							@nodeclick="onnodeclick" @popupopened="onpopupopened">
						</uni-data-picker>
					</view>
				</view>
			</view>
			<view class="list-cell">
				<view class="menu-item-box">
					<view class="label">交易金额</view>
					<view class="value input pd-r-0">
						<uni-easyinput v-model="formData.changeAmount" type="number" placeholder="请输入"></uni-easyinput>
					</view>
				</view>
			</view>
		</view>
		<view class="menu-list">
			<uni-section title="备注" type="line"></uni-section>
			<view class="list-cell">
				<view class="menu-item-box textarea">
					<uni-easyinput v-model="formData.remark" type="textarea" placeholder="请输入备注"></uni-easyinput>
				</view>
			</view>
		</view>
		<view class="menu-list">
			<uni-section title="附件信息" type="line"></uni-section>
			<view class="list-cell">
				<view class="menu-item-box">
					<uni-file-picker class="file-picker"></uni-file-picker>
				</view>
			</view>
		</view>
		<view class="bottom cu-list menu">
			<view class="cu-item item-box" @click="handleSave">
				<view class="content text-center">
					<text class="text-black">保存</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAccount,
		getSupplier,
		getDetail,
		createBill
	} from "@/api/work/finance-in-out"

	export default {
		data() {
			return {
				windowHeight: uni.getSystemInfoSync().windowHeight,
				id: '',
				formData: {
					"id": null,
					"type": "",
					"inOutItemName": "",
					"transObjName": "",
					"changeAmount": 0,
					"discountPrice": null,
					"paymentPrice": null,
					"accountId": 3,
					"accountName": "",
					"billNo": "",
					"billTime": null,
					"status": 10,
					"financeUserId": null,
					"fileUrl": "",
					"remark": null,
				},
				typeList: [
					{
						text: "收入",
						value: "in",
					},
					{
						text: "支出",
						value: "out",
					},
				],
				customerList: [],
				userList: [
					{
						text: "财务人员1",
						value: "1",
					},
					{
						text: "财务人员2",
						value: "2",
					},
				],
				accountList: [],
				inOutItemList: [
					{
						text: "演示收入1",
						value: "演示收入1",
					},
					{
						text: "演示支出1",
						value: "演示支出1",
					},
				],
			}
		},
		created() {
			this.init();
		},
		onLoad: function(options) {
			// 页面加载时获取参数
			this.id = options.id?options.id:"";
			if(this.id)this.getDetail();
		},
		methods: {
			// 初始化
			init() {
				this.getAccount();
				this.getSupplier();
			},
			handleToPwd() {
				this.$tab.navigateTo('/pages/mine/pwd/index')
			},
			handleToUpgrade() {
				this.$modal.showToast('模块建设中~')
			},
			handleCleanTmp() {
				this.$modal.showToast('模块建设中~')
			},
			handleLogout() {
				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$tab.reLaunch('/pages/index')
					})
				})
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			toggle() {
				this.$refs.popup.open('bottom')
			},

			onnodeclick(e) {
				// console.log(e);
			},
			onpopupopened(e) {
				// console.log('popupopened');
			},
			onpopupclosed(e) {
				// console.log('popupclosed');
			},
			onchange(e) {
				// console.log('onchange:', e);
			},
			onAccountChange(e) {
				// console.log('onAccountChange:', e);
				this.formData.accountName = e.detail.value[0].text;
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			// 获取结算账户
			getAccount() {
				getAccount().then((res) => {
					let data = res && res.data ? res.data : [];
					let list = [];
					for (let i = 0; i < data.length; i++) {
						let item = data[i];
						list.push({
							text: item.name,
							value: item.id
						})
					}
					this.accountList = list;
				})
			},
			// 获取交易对象
			getSupplier() {
				getSupplier().then((res) => {
					let data = res && res.data ? res.data : [];
					let list = [];
					for (let i = 0; i < data.length; i++) {
						let item = data[i];
						list.push({
							text: item.name,
							// value: item.id,
							value: item.name,
						})
					}
					this.customerList = list;
				})
			},
			// 检查
			handleCheck() {
				let isChecked = true;
				return isChecked;
			},
			// 保存
			handleSave() {
				if (!this.handleCheck()) return false;
				// 成功的请求参数
				
				// const data = {
				// 	"type": "out",
				// 	"inOutItemName": "演示支出1",
				// 	"transObjName": "供应商测试",
				// 	"changeAmount": "11",
				// 	"discountPrice": "22",
				// 	"paymentPrice": "33",
				// 	"accountId": 3,
				// 	"billTime": 1735660800000,
				// 	"fileUrl": "",
				// 	"financeUserId": "44",
				// 	"remark": "55",
				// 	"accountName": "演示账号"
				// }
				
				
				// 测试的请求参数
				// {
				//     "type": "in",
				//     "inOutItemName": "演示收入1",
				//     "transObjName": "供应商测试",
				//     "changeAmount": "33",
				//     "discountPrice": null,
				//     "paymentPrice": null,
				//     "accountId": 3,
				//     "accountName": "演示账号",
				//     "billNo": "11",
				//     "billTime": "2025-01-23",
				//     "status": 10,
				//     "financeUserId": "22",
				//     "fileUrl": "",
				//     "remark": "44"
				// }
				
				const data = Object.assign({}, this.formData);
				if(!data.id)delete data.id;
				// console.log("data : ", JSON.parse(JSON.stringify(data)));
				// return false;
				createBill(data).then((res) => {
					if(!res)return false;
					this.$modal.msgSuccess("保存成功");
					setTimeout(()=> {
						uni.navigateBack({
							delta: 1 // 返回上一页
						});
					}, 800)
				})
			},
			getDetail() {
				getDetail({id: this.id}).then((res) => {
					let data = res && res.data ? res.data : {};
					this.formData = data;
				})
				// let res = {
				// 	"code": 0,
				// 	"data": {
				// 		"id": 21,
				// 		"type": "in",
				// 		"inOutItemName": "演示收入1",
				// 		"transObjName": "测试客户",
				// 		"changeAmount": 11.000000,
				// 		"discountPrice": null,
				// 		"paymentPrice": null,
				// 		"accountId": 3,
				// 		"accountName": "演示账号",
				// 		"billNo": "SR20241223000001",
				// 		"billTime": 1734451200000,
				// 		"status": 10,
				// 		"financeUserId": null,
				// 		"fileUrl": "http://ywccloud.com/admin-api/infra/file/29/get/f894efa31fd253387330df184102190dc2543ef0df225029b6ef513324c43c8e.pdf",
				// 		"remark": null,
				// 		"createTime": 1734968607000
				// 	},
				// 	"msg": ""
				// }
				// this.formData = res && res.data ? res.data : {};
				// console.log("this.formData : ", JSON.parse(JSON.stringify(this.formData)));
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f8f8f8;
		height: 100%;
	}

	.container-bill-detail-page {
		padding-bottom: 120rpx;
		height: 100%;
		overflow-y: auto;

		.menu-item-box {
			display: flex;
			justify-content: space-between;

			.label {}

			.value {
				color: #999999;
				padding-right: 20rpx;
			}
		}
	}

	.item-box {
		background-color: #FFFFFF;
		margin: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 10rpx;
		border-radius: 8rpx;
		color: #303133;
		font-size: 32rpx;
	}

	.bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 10;
		background: rgba(255, 255, 255, .8);

		.item-box {
			background: #2979ff;

			.text-black {
				color: #ffffff;
			}
		}
	}

	.placeholder {
		color: #999999;
	}

	.popup-content {
		height: 600rpx;
	}
</style>
<style>
	.container-bill-detail-page .file-picker {
		width: 100rpx;
	}

	.container-bill-detail-page .value.input .uni-easyinput {
		text-align: right;
	}

	.container-bill-detail-page .value.input /deep/.uni-easyinput__content {
		border: none;
	}

	.pd-r-0 {
		padding-right: 0 !important;
	}

	.container-bill-detail-page .value.input .uni-data-tree /deep/.input-value-border {
		height: initial;
		border: none;
		padding: 0;
	}

	.container-bill-detail-page .value.input .uni-data-tree .selected-area {
		font-size: 26rpx;
	}

	.container-bill-detail-page .value.input .uni-data-tree /deep/.arrow-area {
		display: none;
	}

	.com-data-picker /deep/.uni-data-tree .selected-list {
		justify-content: center;
	}

	.com-data-picker /deep/.uni-data-tree .tab-c .item {
		justify-content: center;
		text-align: center;
	}

	.container-bill-detail-page .value.input /deep/.uni-icons {
		position: absolute;
		right: 0;
		width: 200rpx;
		z-index: 10;
		opacity: .0;
		/* display: none; */
	}

	.container-bill-detail-page .value.input /deep/.uni-date__x-input {
		text-align: right;
		padding: 0;
		height: initial;
		min-height: initial;
	}

	.container-bill-detail-page .value.input /deep/.uni-date__x-input .input-placeholder {
		font-size: 24rpx;
	}

	.container-bill-detail-page .value.input /deep/.uni-date-x--border {
		border: none;
	}

	.container-bill-detail-page .value.input /deep/.uni-date-single {
		padding: 0;
	}
</style>